import _ from 'lodash';
import { PlusCircleOutlined } from '@ant-design/icons';
import { setMessageTemplate } from '../operations';
import './style.less';

export default function GlobalMessageComponent(props: any) {
  const { value, onChange, controlData, title } = props;

  const openMessageTemplateModal = () => {
    setMessageTemplate({ title, value, onChange, controlData });
  };

  return (
    <div className="bpmn-custom-properties-content-message-wrapper">
      <div className='bpmn-custom-properties-content-message'>
        <div className='bpmn-custom-properties-content-message-content' title={value?.template?.template?.name || ''}>
          {value?.template?.template?.name || ''}
        </div>
        <div className='bpmn-custom-properties-content-message-icon'>
          <PlusCircleOutlined onClick={openMessageTemplateModal} />
        </div>
      </div>
    </div>
  );
};